<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页刮刮卡</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            color: #333;
        }
        .container {
            background: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            text-align: center;
            max-width: 90%;
        }
        h1 {
            margin-top: 0;
            color: #d32f2f;
        }
        .scratch-container {
            position: relative;
            margin: 20px auto;
            width: 400px;
            height: 300px;
            max-width: 100%;
        }
        .img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            cursor: pointer;
        }
        .instructions {
            margin-top: 20px;
            background: rgba(211, 47, 47, 0.1);
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
        }
        .prize-text {
            font-size: 22px;
            font-weight: bold;
            margin: 15px 0;
            color: #d32f2f;
        }
        .message {
            margin-top: 20px;
            padding: 10px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>网页刮刮乐</h1>
        <p class="prize-text">刮开查看您的幸运奖品！</p>
        
        <div class="scratch-container">
            <div class="img">
                <!-- 修改底图内容 -->
                <img src="https://images.unsplash.com/photo-1563014959-7aaa83350992?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80" alt="Mystery Prize">
            </div>
            <canvas id="canvas" width="400" height="300"></canvas>
        </div>
        
        <div class="message">
            <p>祝您好运！您可能会赢得特别奖品！</p>
        </div>
    </div>

    <script>
        let canvas = document.querySelector("#canvas");
        let context = canvas.getContext("2d");
        
        // 绘制涂层（保持灰色）
        context.beginPath();
        context.fillStyle = "grey";
        context.fillRect(0, 0, 400, 300);
        
        // 添加问号图案
        context.font = "bold 60px Arial";
        context.fillStyle = "rgba(0, 0, 0, 0.7)";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText("?", 200, 150);

        // 监听鼠标事件
        canvas.addEventListener("mousemove", (e) => {
            if (e.buttons === 1) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                context.globalCompositeOperation = "destination-out";
                context.beginPath();
                context.arc(x, y, 15, 0, Math.PI * 2);
                context.fill();
            }
        });

        // 添加触摸事件支持
        canvas.addEventListener("touchmove", (e) => {
            e.preventDefault();
            const rect = canvas.getBoundingClientRect();
            const touch = e.touches[0];
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            context.globalCompositeOperation = "destination-out";
            context.beginPath();
            context.arc(x, y, 15, 0, Math.PI * 2);
            context.fill();
        });
    </script>
</body>
</html>